/*
 * 学生详情->平台业务数据->校园实习生
 * @Author: ice
 * @Date: 2018-09-27 19:33:31
 * @Last Modified by: ice
 * @Last Modified time: 2018-10-08 11:53:46
 */
<template>
    <div class="plt-amb-wrap">
        <template v-if="statistic">
            <el-card class="box-card">
                <div
                    slot="header"
                    class="clearfix card-header">
                    实习情况
                </div>
                <div class="card-content">
                    <div class="user-info">
                        <div
                            class="user-header"
                            :style="'background-image: url('+head_image+')'" />
                        <div class="user-name">
                            <div class="user-name-top">{{ true_name }}</div>
                            <div class="user-name-bottom">
                                <el-rate
                                    v-model="statistic.evaluation.score_result"
                                    disabled
                                    text-color="#F5A623"
                                    score-template="{value}" />
                            </div>
                        </div>
                    </div>
                    <div class="user-detail-unit">
                        <div class="user-detail-title">项目数</div>
                        <div class="user-detail-value">{{ statistic.complete_sub_task_count }}</div>
                    </div>
                    <div class="user-detail-spliter" />
                    <div class="user-detail-unit">
                        <div class="user-detail-title">累计工时</div>
                        <div class="user-detail-value">{{ statistic.get_work_time }}h</div>
                    </div>
                    <div class="user-detail-spliter" />
                    <div class="user-detail-unit">
                        <div class="user-detail-title">累计收益</div>
                        <div class="user-detail-value">￥{{ statistic.project_earning }}</div>
                    </div>
                </div>
            </el-card>
            <el-card class="box-card">
                <div
                    slot="header"
                    class="clearfix card-header">
                    <div class="project-header">
                        <div class="project-header-title">他的项目</div>
                        <div class="project-header-selector">
                            <el-select
                                size="small"
                                v-model="selectedProjNo"
                                placeholder="请选择"
                                @change="fnGetprojctDetail()">
                                <el-option
                                    v-for="item in projectOptions"
                                    :key="item.project_no"
                                    :label="item.title"
                                    :value="item.project_no" />
                            </el-select>
                        </div>
                        <div class="project-header-rate">
                            <div class="project-header-rate-top">
                                <span class="title">成果评分</span>
                                <el-rate
                                    show-score
                                    :value="statistic.evaluation.score_evaluation"
                                    disabled
                                    text-color="#F5A623"
                                    score-template="{value}" />
                            </div>
                            <div class="project-header-rate-bottom">
                                <span class="title">工作态度</span>
                                <el-rate
                                    show-score
                                    :value="statistic.evaluation.score_attitude"
                                    disabled
                                    text-color="#F5A623"
                                    score-template="{value}" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="student-tasks">
                    <div
                        class="student-task-wrapper"
                        v-loading="loading">
                        <el-carousel
                            indicator-position="none"
                            height="200px"
                            :arrow="totalTaskPage>1?'hover':'never'"
                            :autoplay="false"
                            v-if="totalTaskPage > 0">
                            <el-carousel-item
                                v-for="pageIndex in totalTaskPage"
                                :key="pageIndex">
                                <div class="carousel-wrapper">
                                    <template v-for="(item, index) in taskList">
                                        <div
                                            class="data-unit"
                                            :key="index"
                                            v-if="index >= (pageIndex-1)*2 && index <= (pageIndex-1)*2+1">
                                            <progress-circle
                                                class="bordered-circle"
                                                :width="116"
                                                :percent="fnComputePercent(item.submit_count, item.require_submit_count)"
                                                :total="item.submit_count" />
                                            <div class="unit-message">
                                                <div class="unit-title">完成情况
                                                    <span>(提交次数)</span>
                                                </div>
                                                <div class="unit-name">{{ item.task.title }}</div>
                                            </div>
                                        </div>
                                    </template>
                                </div>
                            </el-carousel-item>
                        </el-carousel>
                        <div class="carousel-wrapper">
                            <div class="data-unit">
                                <progress-circle
                                    class="bordered-circle"
                                    :width="116"
                                    status="success"
                                    :percent="fnComputePercent(statistic.complete_sub_task_count,statistic.all_sub_task_count)"
                                    :total="statistic.complete_sub_task_count" />
                                <div class="unit-message">
                                    <div class="unit-title">任务指标
                                        <span>(完成次数)</span>
                                    </div>
                                </div>
                            </div>
                            <div class="data-unit">
                                <progress-circle
                                    class="bordered-circle"
                                    :width="116"
                                    status="success"
                                    :percent="fnComputePercent(statistic.expire_sub_task_count,statistic.all_sub_task_count)"
                                    :total="statistic.expire_sub_task_count" />
                                <div class="unit-message">
                                    <div class="unit-title">任务指标
                                        <span>(过期次数)</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-card>
        </template>
        <div
            class="empty"
            v-else>
            <div class="empty-img" />
            <div class="empty-msg">暂无数据</div>
        </div>
    </div>
</template>

<script>
import progressCircle from '@/components/common/progress-circle';
export default {
    components: { progressCircle },
    data() {
        return {
            hd_user_no: '',
            true_name: '',
            head_image: '',
            selectedProjNo: '',
            projectOptions: [{
                project_no: '32132',
                title: 'fdsafdsafd'
            }],
            statistic: '',
            loading: false,
            pageIndex: 0,
            taskList: [],
        };
    },
    computed: {
        totalTaskPage() {
            return parseInt((this.taskList.length + 1) / 2);
        },
    },
    methods: {
        init() {
            this.hd_user_no = this.$route.query.hd_user_no ? this.$route.query.hd_user_no : '';
            if ((!this.statistic || this.true_name) && this.hd_user_no) {
                this.fnGetTaskData();
                this.fnGetSummary();
            }
        },
        /** 获取实习情况 */
        fnGetSummary() {
            this.$post('/studata/platform%5Cstudent%5Cstudent_user', {
                hd_user_no: this.hd_user_no
            }, resp => {
                if (resp.code == 1) {
                    this.true_name = resp.data.true_name;
                    this.head_image = resp.data.head_image;
                }
            });
        },
        fnGetTaskData() {
            this.$post('/studata/platform%5Cstudent%5Cstudent_project_simple_List', {
                hd_user_no: this.hd_user_no
            }, resp => {
                if (resp.code == 1) {
                    this.projectOptions = resp.data;
                    if(this.projectOptions.length > 0){
                        this.selectedProjNo = this.projectOptions[0].project_no;
                        this.fnGetprojctDetail();
                    }
                }
            });
        },
        /** 获取某个项目的详细信息 */
        fnGetprojctDetail() {
            this.loading = true;
            this.$post('/studata/platform%5Cstudent%5Cproject_statistic', {
                hd_user_no: this.hd_user_no,
                project_no: this.selectedProjNo
            }, resp => {
                this.loading = false;
                if (resp.code == 1) {
                    this.statistic = resp.data.statistic;
                    this.taskList = resp.data.task_statistic_list;
                } else {
                    this.$message({
                        type: 'warning',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },
        fnComputePercent(num, total) {
            if (total > 0) {
                return parseFloat((num * 100 / total)).toFixed(1) * 1;
            }
            return 0;
        },
    }
};

</script>

<style lang="less" scoped>
    .box-card {
      margin-bottom: 26px;
    }
    .card-header {
      font-size: 16px;
      font-weight: bold;
      color: rgba(0, 0, 0, 0.85);
      line-height: 24px;
    }
    .plt-amb-wrap {
      min-height: 100%;
      padding: 20px;
      padding-top: 0;
      box-sizing: border-box;
    }
    .card-content {
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
    .user-info {
      flex-shrink: 0;
      width: 400px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 20px 0;
      .user-header {
        width: 72px;
        height: 72px;
        margin-right: 24px;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
      }
      .user-name {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        &-top {
          font-size: 20px;
          font-weight: bold;
          color: rgba(0, 0, 0, 0.85);
          line-height: 28px;
        }
      }
    }
    .user-detail {
      &-unit {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0 25px;
      }
      &-title {
        font-size: 14px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.45);
        line-height: 22px;
      }
      &-value {
        font-size: 30px;
        color: rgba(0, 0, 0, 0.85);
        line-height: 38px;
      }
      &-spliter {
        width: 1px;
        height: 40px;
        background: #e9e9e9;
      }
    }

    .project-header {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      &-title {
        font-size: 16px;
        font-weight: bold;
        color: rgba(0, 0, 0, 0.85);
        line-height: 24px;
        margin-right: 13px;
      }
      &-selector {
        width: 270px;
        margin-right: 60px;
      }
      &-rate {
        &-top {
          margin-bottom: 8px;
        }
        &-top,
        &-bottom {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .title {
            font-size: 14px;
            font-weight: 400;
            color: rgba(90, 94, 102, 1);
            line-height: 20px;
            margin-right: 10px;
          }
        }
      }
    }

    .student-tasks {
    }

    .carousel-wrapper {
      margin: 0 50px;
      height: 218px;
    }
    .data-unit {
      box-sizing: border-box;
      display: flex;
      width: 50%;
      padding: 30px;
      justify-content: center;
      align-items: center;
      float: left;
    }
    .bordered-circle {
      border-radius: 100px;
      padding: 20px;
      box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.04);
    }
    .unit-message {
      flex: 1;
      margin-left: 30px;
      .unit-title {
        font-size: 16px;
        color: #2d2f33;
        letter-spacing: 2px;
        font-weight: bold;
        margin-bottom: 15px;
        line-height: 20px;
        span {
          font-size: 14px;
          color: #878d99;
          letter-spacing: 1px;
          padding: 0;
          line-height: 20px;
        }
      }
      .unit-name {
        height: 30px;
        font-size: 14px;
        color: #5a5e66;
        letter-spacing: 1px;
        line-height: 16px;
      }
    }
</style>